<template>
	<view class="product">
		<view class="mid">
				<view class="info">
					指出纤维和百分比(*)
				</view>
				<view class="mid-container">
					<view class="info-box">
						<view class="ccc">*</view>
						<view class="weight-input">
							<view class="uni-form-item uni-column">
								<picker @change="bindPickerChange" :range="array">
									<label class="" v-model="name">{{array[index]}}</label>
								</picker>
							</view>
						</view>
						<view class="ttt">
							<view class="iconfont icon-xiangxia ic"></view>
						</view>
					</view>
					<view class="info-box">
						<view class="ccc">*</view>
						<input class="weight-input" placeholder="Ex.: 80" v-model.number="percent" />
						<view class="kkk">
							%
						</view>
					</view>
					<view class="ccc">*</view>
					<view class="add" @click="add">+</view>
				</view>
			</view>
	</view>
	
</template>

<script>
	import comboxSearch from '@/components/cuihai-combox/cuihai-combox'
	import selectLay from '@/components/select-lay/select-lay'
	export default {
		data() {
			return {
				array: ['丝绸','聚酯','氨纶','棉花', '纤维胶', '丙烯酸', '聚酰胺', 
						'聚氨酯', '聚丙烯', '羊毛', '亚麻', '皮革', '其他面料'],
				index: 0,
				weight: '',
				name: '丝绸',
				percent: '',
				itemcount: 0,
				name1: '丝绸',
				percent1: 0,
				res1: 0,
				listAdd: [],
				inputEnable: false,
				okVisible: false,
				ss: 0,
				res: -6.60
			}
		},
		components: {
			comboxSearch,
			selectLay
		},
		methods: {
			bindPickerChange: function(e) {		//改变的事件名
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.index = e.target.value			//将数组改变索引赋给定义的index变量
				this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
				this.name=this.array[this.index]
			//	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
			},
			add() {
				let s = 0;
				this.listAdd.forEach(function(element, index, array) {
					s += element.percent1;
				});
				console.log(s)
				if (this.percent + s > 100) {
					let tt=100-s
					uni.showToast({
						title: '百分比不能大于100',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.ss=s
				// console.log(this.s);
				// console.log(this.weight, this.name, this.percent)
				// if(this.weight==0 || this.name=='' || this.percent==0) {
				// 	uni.showToast({
				// 		title: '请填写完整信息',
				// 		icon: 'none'
				// 	})
				// }
				let obj={
					name1: this.name,
					percent1: this.percent,
					res1: 50
				}
				if(this.percent + s == 100) {
					
					this.okVisible=true
				}
				this.listAdd.push(obj),
				// console.log(this.listAdd)
				this.inputEnable=true
				this.itemcount ++
			},
			del(index) {
				this.listAdd.splice(index,1)
				if(this.listAdd.length == 0) {
					this.inputEnable=false
				}
				if(this.ss != 100) {
					this.okVisible=false
				}
			},
			goRes(res) {
				uni.navigateTo({
					url: 'res?res='+res
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.product {
		width: 50vw;
		// height: 100vh;
		// padding: 20rpx;
		box-sizing: border-box;
		
		.mid {
				width: 80%;
				// color: rgba(255, 255, 255, .9);
				font-size: 32rpx;
				// margin: 20rpx auto;
				margin-top: 60rpx;
				text-align: center;
				box-sizing: border-box;
				
				.ccc {
					position: absolute;
					top: -30rpx;
					right: 0rpx;
					color: #f4ca70;
				}
				
				.info {
					width: 100%;
					margin-top: 30rpx;
					font-size: 30rpx;
					text-align: center;
					color: #323233;
					// background-color: white;
				}
			
				.mid-container {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					text-align: center;
					padding: 20rpx;
					box-sizing: border-box;
			
					.info-box {
						position: relative;
						background-color: #ffffff;
						margin-top: 30rpx;
						margin-right: 10rpx;
						height: 80rpx;
						width: 40%;
						border-radius: 10rpx;
						box-sizing: border-box;
			
						.weight-input {
							position: absolute;
							top: 19rpx;
							left: 23rpx;
							display: inline-block;
							width: 55%;
							text-align: left;
							font-size: 37rpx;
							color: #808487;
						}
			
						.ttt {
							position: absolute;
							display: inline-block;
							width: 22%;
							top: 0rpx;
							right: 0rpx;
							color: #808487;
							height: 100%;
							font-size: 40rpx;
							line-height: 80rpx;
							border-top-right-radius: 10rpx;
							border-bottom-right-radius: 10rpx;
			
							.ic {
								font-size: 74rpx!important;
							}
						}
						
						.kkk {
							position: absolute;
							display: inline-block;
							width: 22%;
							top: 0rpx;
							right: 0rpx;
							color: #808487;
							height: 100%;
							font-size: 40rpx;
							line-height: 80rpx;
							border-top-right-radius: 10rpx;
							border-bottom-right-radius: 10rpx;
							border-left: 1px solid #999;
							background-color: #e8ecef;
						}
					}
			
					.add {
						box-sizing: border-box;
						width: 15%;
						height: 80rpx;
						font-weight: 700;
						font-size: 60rpx;
						line-height: 70rpx;
						color: #808487;
						background-color: #e8ecef;
					}
				}
			}
	}
	
}